<template>
  <div>
    <div class="msg-time" v-if="showDate">
      <span>{{$moment(date).format('yyyy-MM-DD HH:mm:ss')}}</span>
    </div>
    <div class="msg-item">
      <div class="msg-icon" @click="userInfo">
        <el-avatar :size="32" shape="square" v-if="icon.indexOf('/')<0" :icon="icon"></el-avatar>
        <el-avatar :size="32" shape="square" v-else :src="icon"></el-avatar>
      </div>
      <div class="msg-item-main">
        <div class="msg-username">{{name}}</div>
        <div class="msg-text">
          <div class="msg-tail"></div>
          <div class="msg-text-value" style="float:left;">
            <span v-if="type=='text'">{{value}}</span>
            <el-image v-if="type=='image'" style="max-height:240px;max-width:240px;" :preview-src-list="[value]" :src="value"/>
            <video v-if="type=='video'" style="max-height:240px;max-width:240px;" :src="value" controls='controls'/>
            <audio-player v-if="type=='audio'" source="else" :value="value.audio" :time="value.time" />
            <file-private v-if="type=='file'" :fileName="value.filename" :size="value.size" :url="value.url" />
          </div>
          
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AudioPlayer from './msgObject/AudioPlayer'
import FilePrivate from './msgObject/FilePrivate.vue'
export default {
  components:{AudioPlayer, FilePrivate},
  props:{
    id:{type:[String,Number],required:true},
    name:{type:String,default:'匿名'},
    icon:{type:String,default:'el-icon-user-solid'},
    value:{type:[String,Object],required:true},
    time:{type:Number,default:0},
    type:{type:String,default:'text',validator:val=>{
      if (['text','audio','video','file','image','system','approval'].indexOf(val)<0){
        console.error("组件MsgItemMe的type属性只允许为'text','audio','video','file','image','system','approval',当前值:"+val)
        return false
      }
      return true
    }},
    date:{type:[Date,String],default:'2021-01-22 21:00:00'},
    showDate:{type:Boolean,default:true}
  },
  methods:{
    userInfo(e){
      this.$emit('userInfo',this.id,typeof this.type=='undefined' ? 'text' : this.type)
    }
  }
}
</script>

<style lang="less" scoped>
.msg-time {
  text-align: center;
  font-size: 10px;
  span {
    background-color: #aaa;
    border-radius:3px;
    padding: 0px 10px;
    color:#fff;
  }
}
.msg-item {
  display: flex;
  margin-bottom: 30px;
}
.msg-icon {
  justify-content: start;
  flex: 0 0 32px;
  width: 32px;
  margin-top:10px;
  margin-right:10px;
  cursor: pointer;
}
.msg-item-main {
  justify-content: end;
  width: 100%;
  text-align: left;
}
.msg-username {
  font-size: 10px;
  margin-left:10px;
  color:#aaa;
}
.msg-text {
  display: flex;
  text-align: left;
  float: left;
}
.msg-text-value {
  width: fit-content;
  padding: 5px 10px;
  background-color: #ececec;
  border-radius: 5px;
  font-size: 12px;
  text-align: left;
}
.msg-tail {
  justify-content: end;
  flex: 0 0 0px;
  margin-top: 10px;
  height: 0px;
  border-style: solid;
  border-width: 0px 10px 10px 0px;
  border-color: transparent #ececec transparent transparent;
  width: 0px;
}
</style>
